<template>
	<div class="drag-list-wrapper">
		<div class="drag-list-con con1">
			<slot name="left-title"></slot>
			<draggable
				class="drop-box1"
				:class="dropConClass.left"
				:options="options"
				:value="list1"
				@input="handleListChange($event, 'left')"
				@end="handleEnd($event, 'left')"
			>
				<div class="drag-list-item" v-for="(itemLeft, index) in list1" :key="`drag_li1_${index}`">
					<slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot>
				</div>
			</draggable>
		</div>
		<div class="drag-list-con con2">
			<slot name="right-title"></slot>
			<draggable
				class="drop-box2"
				:class="dropConClass.right"
				:options="options"
				:value="list2"
				@input="handleListChange($event, 'right')"
				@end="handleEnd($event, 'right')"
			>
				<div class="drag-list-item" v-for="(itemRight, index) in list2" :key="`drag_li2_${index}`">
					<slot name="right" :itemRight="itemRight">{{ itemRight }}</slot>
				</div>
			</draggable>
		</div>
	</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
	name: 'DragList',
	components: {
		draggable
	},
	props: {
		list1: {
			type: Array,
			required: true
		},
		list2: {
			type: Array,
			default: () => []
		},
		dropConClass: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			options: { group: 'drag_list' }
		};
	},
	methods: {
		handleListChange(value, type) {
			if (type === 'left') this.$emit('update:list1', value);
			else this.$emit('update:list2', value);
		},
		handleEnd(event, type) {
			const srcClassName = (event.srcElement || event.target).classList[0];
			const targetClassName = event.to.classList[0];
			let src = '';
			let target = '';
			if (srcClassName === targetClassName) {
				if (type === 'left') {
					src = 'left';
					target = 'left';
				} else {
					src = 'right';
					target = 'right';
				}
			} else {
				if (type === 'left') {
					src = 'left';
					target = 'right';
				} else {
					src = 'right';
					target = 'left';
				}
			}
			this.$emit('on-change', {
				src: src,
				target: target,
				oldIndex: event.oldIndex,
				newIndex: event.newIndex
			});
		}
	}
};
</script>
<style lang="less">
.drag-list-wrapper {
	height: 100%;
	.drag-list-con {
		width: 50%;
		float: left;
	}
}
</style>
